import { GetSuppliers, DeleteSupplier, BanSupplier } from "../../api/supplier";
import { Table, Button, Input, Space, Tag, Pagination, message, Spin, Skeleton } from "antd";
import { useEffect, useState } from "react";
import "../../css/supplier.css";
import React from "react";

import { useNavigate } from 'react-router-dom';


const PAGE_SIZE = 7;// 设置每页显示的数据条数

const Supplier = () => {
    const [Supplier, setSupplier] = useState([]);
    const [currentPage, setCurrentPage] = useState(1);//当前页
    const [total, setTotal] = useState(0); // 定义total变量
    const [searchKeyword, setSearchKeyword] = useState('');//搜索关键字
    const [spinning, setSpinning] = React.useState(false);//加载中
    const [shows, setShows] = useState(true);//骨架屏
    const columns = [
        {
            title: "序号",
            width: 70,
            render: (text, record, index) => `${index + 1}`
        },
        {
            title: "供应商",
            dataIndex: "enterpriseName",
            key: "enterpriseName",
            ellipsis: true,
            width: 100,
        },
        {
            title: "订单数",
            dataIndex: "orderCount",
            key: "orderCount",
        },
        {
            title: "完成数",
            dataIndex: "completeOrderCount",
            key: "completeOrderCount",
        },
        {
            title: "取消数",
            dataIndex: "cancelOrderCount",
            key: "cancelOrderCount",
        },
        {
            title: "总金额",
            dataIndex: "money",
            key: "money",
            width: 130,
            render: (_, record) => (
                <Tag color={record.money > 0 ? 'error' : 'default'}>￥{record.money}</Tag>
            )
        },
        {
            title: "成交额",
            dataIndex: "currMoney",
            key: "currMoney",
            width: 110,
            render: (_, record) => (
                <Tag color={record.currMoney > 0 ? 'error' : 'default'}>￥{record.currMoney}</Tag>
            )
        },
        {
            title: "取消额",
            dataIndex: "cancelMoney",
            key: "cancelMoney",
            width: 130,
            render: (_, record) => (
                <Tag color={record.cancelMoney > 0 ? 'error' : 'default'}>￥{record.cancelMoney}</Tag>
            )
        },
        {
            title: '销量',
            dataIndex: 'sales',
            key: 'sales',
            width: 70
        },
        {
            title: '激活',
            dataIndex: 'isActive',
            key: 'isActive',
            render: (_, record) => (
                <Tag color={record.isActive === 1 ? 'success' : 'warning'}>{record.isActive === 1 ? "是" : "否"}</Tag>
            ),
        },
        {
            title: '禁用',
            dataIndex: 'isBan',
            key: 'isBan',
            render: (_, record) => (
                <Tag color={record.isBan === 1 ? 'error' : 'success'}>{record.isBan === 1 ? "是" : "否"}</Tag>
            ),
        },
        {
            title: '时间',
            dataIndex: 'time',
            key: 'time',
            ellipsis: true,
            width: 90
        },
        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 200,
            render: (record) => (
                <Space size="middle">
                    <Button type="primary" id='button-xq' ghost onClick={() => detail(record)}>详情</Button>
                    {record.isActive === 1 && record.isBan === 0 && (
                        <Button id='button-ban' ghost onClick={() => Ban(record)}>禁用</Button>
                    )}
                    {record.isActive === 1 && record.isBan === 1 && (
                        <Button id='button-qy' ghost onClick={() => Ban(record)}>启用</Button>
                    )}
                    {record.isActive === 0 ? (
                        <Button type="primary" danger onClick={() => Delete(record)} >删除</Button>
                    ) : null}
                </Space>
            ),
        },
    ];
    const data = async () => {
        setSpinning(true);
        await GetSuppliers({
            page: currentPage,
            limit: PAGE_SIZE,
            key: searchKeyword,
            // total: ''
        }).then((res) => {
            if (res.result === 0) {
                setSpinning(false);
                setSupplier(res.data.data);
                setTotal(res.data.total);
                setShows(false);
            }
        });

    };
    useEffect(() => {
        data();
    }, [currentPage, searchKeyword]);

    const handlePageChange = (page) => {
        setCurrentPage(page);
    };

    const Delete = async (record) => {
        setSpinning(true);
        const res = await DeleteSupplier({
            id: record.id
        });
        if (res.result === 0) {
            message.success(res.message, 1.5);
            setSpinning(false);
            setTimeout(() => {
                setSupplier(prevSupplier => prevSupplier.filter(item => item.id !== record.id));
            }, 1000);

        }
    }
    const Ban = async (record) => {
        setSpinning(true);
        const res = await BanSupplier({
            id: record.id,
            isBan: record.isBan === 1 ? 0 : 1
        });
        if (res.result === 0) {
            message.success(res.message, 1.5);
            setSpinning(false);
            data();
        }
    }
    const navigate = useNavigate();
    const detail = (val) => {
        navigate(`/supplier/detail/` + val.id);
    }
    const add = () => {
        setTimeout(() => {
            setSpinning(true)
            navigate('/supplier/Addsupplier/');
        }, 1000);
        setSpinning(true)

    }
    return (
        <div className="exam-container">
            <Skeleton loading={shows} active={true} paragraph={{ rows: 10 }} rows={20} style={{ padding: '10px' }}>
                <div className="container">
                    <div className="content">
                        <div className="title">
                            <div className="button">
                                <Button type="primary" id='button-xq' ghost onClick={() => add()}>新增供应商</Button>

                            </div>
                            <div className='box-button3'>
                                <Space.Compact
                                    style={{
                                        width: '100%',
                                        height: '40px'
                                    }}
                                >
                                    <Input placeholder="输入关键字" value={searchKeyword}
                                        onChange={(e) => setSearchKeyword(e.target.value)} />
                                    <Button type="primary" id='button-xq' ghost style={{ height: '40px' }}>搜索</Button>
                                </Space.Compact>
                            </div>
                        </div>
                        <Table dataSource={Supplier} columns={columns} bordered pagination={false} scroll={{
                            x: 1300,
                        }}></Table>
                        <Pagination current={currentPage} total={total} pageSize={PAGE_SIZE} onChange={handlePageChange} className="pagination" />
                    </div>
                </div>

                <Spin spinning={spinning} tip="Loading" fullscreen />
            </Skeleton>
        </div>
    );
};
export default Supplier;